<script setup>
import { Plus } from '@element-plus/icons-vue'
import { ref, onMounted } from 'vue'
import { getMyProductAPI, delProductAPI, addProductAPI } from '@/apis/product'
import { ElMessage } from 'element-plus';

const goodList = ref([])

const getGoods = async () => {
    const res = await getMyProductAPI()
    if (res.code === 2000) {
        goodList.value = res.data
    }
}

const del = async (id) => {
    const res = await delProductAPI(id)
    if (res.code === 2000) {
        getGoods()
        ElMessage({ type: 'success', message: '删除成功' })
    }
}

let dialogTitle = ref('')
let dialogVisible = ref(false)
let dialogType = ref(1)
const emptySku = {
    sku: '',
    price: ''
}
const empty = {
    title: '',
    description: '',
    pic: '',
    minPrice: 0,
    maxPrice: 0,
}
const product = ref({...empty, skus: []})
const changeDialogVisible = (type) => {
    dialogType.value = type
    product.value = { ...empty, skus: [] }
    if (type === 1) {
        dialogTitle.value = '添加商品'
    }
    else if (type === 2) {
        dialogTitle.value = '修改商品'
    }
    dialogVisible.value = true
}

// 添加一个sku
const addSku = () => {
    product.value.skus.push({ ...emptySku })
}

// 图片上传
const handleCoverSuccess = (response, uploadFile) => {
    product.value.pic = response.data
}

const beforeCoverUpload = (file) => {
    // console.log(file.type)
    if (file.type !== 'image/jpeg' && file.type !== 'image/png') {
        ElMessage({
            type: 'error',
            message: '图片上传格式仅支持 JPEG、JPG、PNG'
        })
        return false
    } else if (file.size / 1024 / 1024 > 10) {
        ElMessage.error('图片大小不要超过 10MB')
        return false
    }
    return true
}

const check = () => {
    if (product.value.description === '' || product.value.title === '' || product.value.pic === '' || product.value.skus.length === 0) {
        ElMessage({ type: 'warning', message: '请完整填写商品信息' })
        return false
    }
    return true
}

// 添加商品
const add = async () => {
    if (check()) {
        let minPrice = 9999999
        let maxPrice = 0
        product.value.skus.forEach(i => {
            if (i.price < minPrice) minPrice = i.price
            if (i.price > maxPrice) maxPrice = i.price
        })
        product.value.minPrice = minPrice
        product.value.maxPrice = maxPrice
        console.log(product.value);
        const res = await addProductAPI({ ...product.value })
        if (res.code === 2000) {
            getGoods()
            ElMessage({ type: 'success', message: '添加成功' })
            dialogVisible.value = false
        }
    }
}

onMounted(() => {
    getGoods()
})
</script>

<template>
<div class="prod-page">
    <div class="prod-title">商品管理</div>
    <div class="operat-btn">
        <a href="javascript:;" class="add-btn" @click="changeDialogVisible(1)">添加商品</a>
    </div>
    <table class="table">
            <thead style="background-color: #f2f2f2; margin-top: 20px; font-size: 14px; height: 50px;">
                <th width="150">商品图片</th>
                <th width="220">商品名</th>
                <th width="100">最低价</th>
                <th width="116">最高价</th>
                <th widith="160">发布时间</th>
                <th width="150">操作</th>
            </thead>
            <tbody>
                <tr v-for="i in goodList" :key="i.id">
                    <td class="good-image">
                        <div class="image"><img :src="i.pic"></div>
                    </td>
                    <td class="td"><p>{{i.title}}</p></td>
                    <td class="td"><p>&yen;{{i.minPrice}}</p></td>
                    <td class="td"><p>&yen;{{i.maxPrice}}</p></td>
                    <td class="td"><p>{{i.createTime}}</p></td>
                    <td class="td">
                        <div class="opretion">
                            <!-- <a href="javascript:;" class="opretion-btn green">详情</a> -->
                            <!-- <a href="javascript:;" class="opretion-btn green" @click="changeDialogVisible(2)">修改</a> -->
                            <el-popconfirm icon-color="#DC2F2F"  title="确认删除吗?" confirm-button-text="确认" cancel-button-text="取消" @confirm="del(i.id)">
                                <template #reference>
                                    <a href="javascript:;" class="opretion-btn red">删除</a>
                                </template>
                            </el-popconfirm>
                        </div>
                    </td>
                </tr>
                <tr v-if="goodList.length === 0">
                    <td colspan="5"><div class="order-none">
                        <el-empty description="您还没有商品">
                        </el-empty>
                    </div></td>
                </tr>
            </tbody>
        </table>
    
</div>

<el-dialog
    v-model="dialogVisible"
    :title="dialogTitle"
    width="35%">
    <div class="dialog-content">
        <div>
            <div class="content-label">商品名称：</div>
            <div class="content-ipt"><input type="text" v-model="product.title"></div>
        </div>
        <div>
            <div class="content-label">商品描述：</div>
            <div class="content-ipt"><input type="text" v-model="product.description"></div>
        </div>
        <div>
            <div class="content-label">商品图片：</div>
            <el-upload
                class="cover-uploader"
                action="http://127.0.0.1:8081/upload"
                :show-file-list="false"
                :on-success="handleCoverSuccess"
                :before-upload="beforeCoverUpload">
                <img v-if="product.pic" :src="product.pic" class="avatar" />
                <el-icon v-else class="cover-uploader-icon"><Plus /></el-icon>
                <template #tip>
                    <div class="el-upload__tip">图片上传格式支持 JPEG、JPG、PNG</div>
                </template>
            </el-upload>   
        </div>
        <div>
            <div class="content-label">规格：</div>
            <div class="sku-ipt">
                <div class="sku-item" v-for="(sku, i) in product.skus" :key="i">
                    <div class="sku-des" style="width: 250px; margin-right: 20px;"><input type="text" placeholder="规格描述" v-model="sku.sku"></div>
                    <div class="sku-price"><input type="text" placeholder="价格" v-model="sku.price"></div>
                </div>
                <a href="javascript:;" @click="addSku">添加规格</a>
            </div>
        </div>
    </div>
    <template #footer>
        <span class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="add">确定</el-button>
        </span>
    </template>
</el-dialog>
</template>



<style scoped lang='scss'>
.cover-uploader .avatar {
    width: 150px;
    height: 150px;
    display: block;
}

.prod-page {
    width: 100%;
    padding: 20px 30px;
    min-height: 700px;
    background-color: #fff;

    .prod-title {
        font-size: 21px;
        padding: 15px 0;
        border-bottom: 1px solid #e8e8e8;
    }
    .table {
        width: 100%;
        margin-top: -10px;
        .order-none {
            text-align: center;
            padding: 110px 0;
            background: #fff;
        }
    }
    .good-image {
        display: flex;
        align-items: center;
        justify-content: center;
        .image {
            width: 100px;
            height: 100px;
        }
    }


    .add-btn {
    display: block;
    width: 90px;
    height: 35px;
    line-height: 35px;
    border-radius: 4px;
    font-size: 14px;
    color: #fff;
    background-color: #39bf3e;
    text-align: center;
    margin: 10px 0;
}
}
.opretion {
    display: flex;
    justify-content: center;

    .opretion-btn {
        width: 50px;
        height: 30px;
        line-height: 30px;
        border-radius: 4px;
        font-size: 12px;
        color: #ffffff;
        text-align: center;
        font-weight: 400;

        &:first-child {
            margin-right: 10px;
        }
    }
}
table{
    border-collapse: collapse; 
    border: none;  
    border-collapse: separate; border-spacing: 0px 10px;
}

p {
    text-align: center;
    font-weight: 400;
    font-size: 16px;
}

.dialog-content {
    width: 100%;

    >div {
        display: flex;
        align-items: center;
        margin-bottom: 20px;

        &:last-child {
            margin-bottom: 0;
        }
    }

    .content-label {
        width: 90px;
        color: #666;
        font-weight: bold;
    }

    .content-ipt {
        width: 300px;
        height: 35px;
        border: 1.5px solid #d8d8d8;
        border-radius: 5px;

        input {
            width: 100%;
            height: 100%;
            font-size: 16px;
            padding: 0 10px;
            border-radius: 5px;
        }
    }

    .sku-ipt {
        width: 250px;

        .sku-item {
            width: 100%;
            display: flex;
            justify-content: space-between;
            margin-bottom: 15px;

            input {
                font-size: 14px;
                padding: 5px 10px;
                border: 1.5px solid #d8d8d8;
            }
        }

        >a {
            display: inline-block;
            padding: 5px 10px;
            color: #39bf3e;
            border: #39bf3e solid 1px;
            background-color: #f0f9eb;
        }
    }

    .price-ipt {
        width: 100px;
        height: 35px;
        border: 1.5px solid #d8d8d8;
        border-radius: 5px;

        input {
            width: 100%;
            height: 100%;
            font-size: 16px;
            padding: 0 10px;
            border-radius: 5px;
        }
    }
}  
.blue {
    background-color: rgb(20, 167, 225);
}
.green {
    background-color: #39bf3e;
}  
.red {
    background-color: rgb(220, 47, 47);
}
</style>

<style lang="scss">
.cover-uploader .el-upload {
    border: 1px dashed #999;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.cover-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.cover-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 150px;
    height: 150px;
    text-align: center;
}
</style>